<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/menu.js"></script>

<div id="app" style="height: 100%;">
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">位置</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <br/>
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="账号:">
            <el-input v-model="account" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item label="姓名:">
            <el-input v-model="name" placeholder="姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"  size="middle" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"  size="middle" @click="clear">清空查询</el-button>
        </el-form-item>
    </el-form>
    <el-button type="primary" size="mini" @click="dialogFormVisible=true">新增</el-button>
    <el-table :data="tableData" :loading="loading" height="380px" border style="width: 100%">
        <el-table-column prop="account" label="账号" width="160"></el-table-column>
        <el-table-column prop="password" label="密码" width="160"></el-table-column>
        <el-table-column prop="name" label="用户名" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="120">
            <template  slot-scope="scope">
                <span v-if="scope.row.status==0">启用</span>
                <span v-else-if="scope.row.status==1">禁用</span>
            </template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建时间" width="180"></el-table-column>
        <el-table-column prop="modelName" label="角色名称" width="280"></el-table-column>
        <el-table-column fixed="right" label="操作" width="140">
            <template slot-scope="scope">
                <el-button type="text" size="medium" @click="delUser(scope.row.account)">删除</el-button>
                <el-button type="text" size="medium" @click="updateUser(scope.row)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            background
            layout="sizes, prev, pager, next, jumper, ->, total, slot"
            :total="totalRecord"
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[5,10,15,20]"
            @current-change="handleCurrentChange"
            @size-change="handleSize">
    </el-pagination>

    <el-dialog title="用户界面" :visible.sync="dialogFormVisible" :before-close="closeBefore" width="500px" height="200px" top="10px">
        <el-form label-width="80px" :model="form" >
            <el-form-item label="账号:" >
                <el-input v-model="form.account"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户名:" >
                <el-input v-model="form.name"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码:" >
                <el-input v-model="form.password"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="状态:" >
                <el-radio v-model="form.status" :label="0">启用</el-radio>
                <el-radio v-model="form.status" :label="1">禁用</el-radio>
            </el-form-item>
            <el-form-item label="角色:">
                <el-checkbox-group v-model="form.modelList">
                    <el-checkbox label="purchase">采购</el-checkbox>
                    <el-checkbox label="sell">销售</el-checkbox>
                    <el-checkbox label="stock">仓管</el-checkbox>
                    <el-checkbox label="finance">财务</el-checkbox>
                </el-checkbox-group>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="margin-top: -50px">
            <el-button @click="cancel" size="small">取 消</el-button>
            <el-button type="primary" @click="sureAdd" size="small">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    window.onload = function () {

        let vm = new Vue({
            el: "#app",
            data:{
                loading:true,
                labelPosition:"left",
                dialogFormVisible:false,
                tableData:[],
                form:{
                    account:"",
                    password:"",
                    name:"",
                    createDate:"",
                    status:"",
                    modelName:"",
                    modelList:[]
                },
                totalRecord:0,
                currentPage:1,
                pageSize:5,
                account:"",
                name:""
            },
            methods:{
                init:function (){
                    this.loading = false;
                    this.getData(this.currentPage,this.pageSize,this.account,this.name);
                },
                getData:function (curP,pSize,acc,name){
                    let that = this;

                    axios.get("getUsers?currentPage="+curP+"&pageSize="+pSize+"&account="+acc+"&name="+name).then(function (resp){
                        that.tableData = resp.data.data.lists;
                        that.totalRecord = resp.data.data.totalRecord;
                    });
                },
                handleCurrentChange:function (val){
                    this.currentPage = val;
                    this.getData(this.currentPage,this.pageSize,this.account,this.name);
                },
                handleSize:function (val){
                    this.pageSize = val;
                    this.currentPage = 1;
                    this.getData(this.currentPage,this.pageSize,this.account,this.name);
                },
                sureAdd:function (){
                    this.dialogFormVisible = false;
                    let that = this;

                    let scmUser = {account:this.form.account,
                        name:this.form.name,
                        password:this.form.password,
                        createDate:this.form.createDate,
                        status:this.form.status,
                        modelName:this.form.modelList};

                    axios.post("addOrUpdateUser",scmUser).then(function (resp){
                        if(resp.data.code == 200){
                            that.$message({
                                message: '成功',
                                type: 'success'
                            });
                            that.form.account = that.form.name = that.form.password = that.form.createDate = that.form.status = "";
                            that.form.modelList = [];
                            that.init();
                        }
                    });
                },
                updateUser:function (scmUser){
                    this.dialogFormVisible = true;
                    console.log(scmUser)
                    this.form.account = scmUser.account;
                    this.form.name =  scmUser.name;
                    this.form.password =  scmUser.password;
                    this.form.createDate = scmUser.createDate;
                    this.form.status = scmUser.status;

                    if(scmUser.modelName == "admin"){
                        this.form.modelList = ["purchase","sell","stock","finance"];
                    }else {
                        this.form.modelList = scmUser.modelName[0].split(",");
                    }
                },
                delUser:function (acc){
                    let that = this;
                    if(window.confirm("确定删除？")){
                        axios.get("delUser?account="+acc).then(function (resp){
                            if(resp.data.code == 200){
                                that.$message({
                                    message: '成功',
                                    type: 'success'
                                });
                                that.init()
                            }
                        }).catch(function (){
                            that.$message({
                                message: '该用户有关联的数据，不能删除！',
                                type: 'error'
                            });
                        });
                    }
                },
                closeBefore:function (){
                    this.cancel();
                },
                cancel:function (){
                    this.dialogFormVisible = false;
                    this.form.account = this.form.name = this.form.password = this.form.createDate = this.form.status = "";
                    this.form.modelList = [];
                },
                search:function (){
                    /*模糊查询*/
                    this.getData(1,this.pageSize,this.account,this.name);
                },
                clear:function (){
                    this.account=this.name="";
                    this.getData(1,this.pageSize,this.account,this.name);
                }
            }
        });

        vm.init();
    }
</script>